<!-- ReactiveExample.vue -->
<script setup lang="ts">
import { reactive, toRefs } from 'vue'

// 定义类型
interface Hero {
  name: string
  level: number
  skills: string[]
}

// 创建响应式对象
const hero = reactive<Hero>({
  name: 'Vue 法师',
  level: 1,
  skills: ['火球术']
})

// 安全解构（保持响应）
const { name, level } = toRefs(hero)

// 升级！
const levelUp = () => {
  level.value++
  if (level.value === 3) hero.skills.push('冰冻术')
}
</script>

<template>
  <div class="reactive-example">
    <h3>{{ name }} Lv.{{ level }}</h3>
    <p>技能列表：{{ hero.skills.join('、') }}</p>
    <button @click="levelUp">打怪升级</button>
  </div>
</template>

<style scoped>
.reactive-example {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 10px;
}
</style>